<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue to do list demo</title>
		<script type="text/javascript" src="../../../lib/vue/vue.min.js" ></script>
	</head>
	<body>
	<center>	
		<h1>this is a to do list demo ... </h1>
		<div id="app" style="width: 300px;">
			<input v-model="inPut" @keyup.enter="getInput" />
			<ul>
				<li v-for="item in items" @click="doItem(item)" :class="{do:item.isDo}">{{item.thing}}</li>
			</ul>
		</div>
	</center>
	</body>
	<style>
		.do{
			text-decoration:line-through;
		}
	</style>
	<script type="text/javascript" src="store.js" ></script>
	<script>
		console.log(Store)
		new Vue({
			el : "#app",
			data:{
				inPut : '',
				items : (Store.fetch() == null) ? [] : Store.fetch(),				
			},
			methods : {
				// 输入框按下回车键之后的方法
				getInput : function(){
					// 将新添加的item push 到数组 items 中
					this.items.push({
						thing : this.inPut,
						isDo : false
					})
					console.log(this.items)
					Store.save(this.items) // 保存到 localstorage
					this.inPut = ""
				},
				// 点击 item 的时候触发该方法改变 class 的值
				doItem : function(item){
					item.isDo = !item.isDo
					console.log(item)
				}
			},
			// 监听 items 改变状态
			watch : {
				items : {
					handler : function(items){//只有一个参数获得就是最新的值,第二个参数是旧值,可以不写
						Store.save(items)
					},
					deep:true // 一定要设置为 true 才能改变 localstorage 中的值
				}
			}
		})
	</script>
</html>
